<template>
    <v-stepper
            v-model="current"
            :vertical="vertical"
            :alt-labels="altLabels"
    >
        <template v-if="vertical">
            <v-stepper-step :complete="current > 0" step="0">
                {{steps[0]}}
                <!--                <small>Summarize if needed</small>-->
            </v-stepper-step>

            <v-stepper-content step="0">
                <v-card class="mb-12">
                    <v-card-title>上传Excel数据文件</v-card-title>
                    <v-card-text>
                        <v-list dense>
                            <v-list-item>
                                <v-list-item-content>序号</v-list-item-content>
                                <v-list-item-content>姓名</v-list-item-content>
                                <v-list-item-content>年龄</v-list-item-content>
                                <v-list-item-content>学校</v-list-item-content>
                            </v-list-item>
                            <v-divider></v-divider>
                            <v-list-item v-for="(student,index) in desserts" :key="index">
                                <v-list-item-content>{{student.id}}</v-list-item-content>
                                <v-list-item-content>{{student.name}}</v-list-item-content>
                                <v-list-item-content>{{student.age}}</v-list-item-content>
                                <v-list-item-content>{{student.school}}</v-list-item-content>
                            </v-list-item>
                        </v-list>
                    </v-card-text>

                </v-card>
                <input
                        type="file"
                        v-show="false"
                        accept=".xlsx"
                        @change="changeexcel"
                        ref="uploadexcel"
                ></input>
                <v-btn
                        class="white--text"
                        color="deep-purple accent-4"
                        @click="uploadexcel"
                >
                    Upload Excel
                </v-btn>
            </v-stepper-content>

            <v-stepper-step :complete="current > 1" step="1">
                {{steps[1]}}
                <!--                <small>Summarize if needed</small>-->
            </v-stepper-step>
            <v-stepper-content step="1">
                <v-card class="mx-auto">
                    <v-card-title> 上传模板文件</v-card-title>

                    <v-card-text v-for="(e, n) in example" :key="n" v-text="e"></v-card-text>

                    <v-card-actions>
                        <input
                                type="file"
                                v-show="false"
                                accept="text/plain,.bat,.cmd,.md"
                                @change="changeplain"
                                ref="uploadplain"
                        ></input>
                        <v-btn
                                text
                                class="white--text"
                                color="deep-purple accent-4"
                                @click="uploadplain"
                        >
                            Upload Template
                        </v-btn>

                        <v-spacer></v-spacer>

                        <v-btn icon @click="show = !show">
                            <v-icon>{{ show ? "mdi-chevron-up" : "mdi-chevron-down" }}</v-icon>
                        </v-btn>
                    </v-card-actions>

                    <v-expand-transition>
                        <div v-show="show">
                            <v-divider></v-divider>
                            <v-card-text>
                                <p>除了可以使用表格中的字段，后台还为你提供了一些可用字段：
                                    <strong v-text="`{{ .Now }}`"></strong>、
                                    <strong v-text="`{{ .Today }}`"></strong>、
                                    <strong v-text="`{{ .Time }}`"></strong>、
                                    <strong v-text="`{{ .Year }}`"></strong>、
                                    <strong v-text="`{{ .Month }}`"></strong>、
                                    <strong v-text="`{{ .Day }}`"></strong>、
                                    <strong v-text="`{{ .Hour }}`"></strong>、
                                    <strong v-text="`{{ .Minute }}`"></strong>、
                                    <strong v-text="`{{ .Second }}`"></strong>、
                                </p>
                            </v-card-text>
                        </div>
                    </v-expand-transition>
                </v-card>
            </v-stepper-content>

            <v-stepper-step :complete="current > 2" step="2">
                {{steps[2]}}
                <!--                <small>Summarize if needed</small>-->
            </v-stepper-step>
            <v-stepper-content step="2">
                <v-card
                        class="mb-2"
                        color="grey lighten-1"
                        height="200px"

                >
                    <p v-for="(msg,index) in msgs" v-text="`> ` + msg" style="color:green;"></p>
                </v-card>

                <v-btn
                        color="primary"
                        @click="download"
                >
                    Download
                </v-btn>

                <v-btn text @click="current=0">Again</v-btn>
            </v-stepper-content>
        </template>
        <template v-else>
            <v-stepper-header>
                <template v-for="(step, n) in steps">
                    <v-stepper-step
                            :key="`${n}-step`"
                            :complete="current > n"
                            :step="n"
                            :editable="editable"
                    >
                        {{step}}
                    </v-stepper-step>
                    <v-divider v-if="n !== steps.length-1" :key="n"></v-divider>
                </template>
            </v-stepper-header>

            <v-stepper-items>
                <v-stepper-content step="0">
                    <v-card class="mb-12">
                        <v-card-title>上传Excel数据文件</v-card-title>
                        <v-card-text>
                            <v-list dense>
                                <v-list-item>
                                    <v-list-item-content>序号</v-list-item-content>
                                    <v-list-item-content>姓名</v-list-item-content>
                                    <v-list-item-content>年龄</v-list-item-content>
                                    <v-list-item-content>学校</v-list-item-content>
                                </v-list-item>
                                <v-divider></v-divider>
                                <v-list-item v-for="(student,index) in desserts" :key="index">
                                    <v-list-item-content>{{student.id}}</v-list-item-content>
                                    <v-list-item-content>{{student.name}}</v-list-item-content>
                                    <v-list-item-content>{{student.age}}</v-list-item-content>
                                    <v-list-item-content>{{student.school}}</v-list-item-content>
                                </v-list-item>
                            </v-list>
                        </v-card-text>

                    </v-card>
                    <input
                            type="file"
                            v-show="false"
                            accept=".xlsx"
                            @change="changeexcel"
                            ref="uploadexcel"
                    ></input>
                    <v-btn
                            class="white--text"
                            color="deep-purple accent-4"
                            @click="uploadexcel"
                    >
                        Upload Excel
                    </v-btn>
                </v-stepper-content>
                <v-stepper-content step="1">
                    <v-card class="mx-auto">
                        <v-card-title> 上传模板文件</v-card-title>

                        <v-card-text v-for="(e, n) in example" :key="n" v-text="e"></v-card-text>

                        <v-card-actions>
                            <input
                                    type="file"
                                    v-show="false"
                                    accept="text/plain,.bat,.cmd,.md"
                                    @change="changeplain"
                                    ref="uploadplain"
                            ></input>
                            <v-btn
                                    text
                                    class="white--text"
                                    color="deep-purple accent-4"
                                    @click="uploadplain"
                            >
                                Upload Template
                            </v-btn>

                            <v-spacer></v-spacer>

                            <v-btn icon @click="show = !show">
                                <v-icon>{{ show ? "mdi-chevron-up" : "mdi-chevron-down" }}</v-icon>
                            </v-btn>
                        </v-card-actions>

                        <v-expand-transition>
                            <div v-show="show">
                                <v-divider></v-divider>
                                <v-card-text>
                                    <p>除了可以使用表格中的字段，后台还为你提供了一些可用字段：
                                        <strong v-text="`{{ .Now }}`"></strong>、
                                        <strong v-text="`{{ .Today }}`"></strong>、
                                        <strong v-text="`{{ .Time }}`"></strong>、
                                        <strong v-text="`{{ .Year }}`"></strong>、
                                        <strong v-text="`{{ .Month }}`"></strong>、
                                        <strong v-text="`{{ .Day }}`"></strong>、
                                        <strong v-text="`{{ .Hour }}`"></strong>、
                                        <strong v-text="`{{ .Minute }}`"></strong>、
                                        <strong v-text="`{{ .Second }}`"></strong>、
                                    </p>
                                </v-card-text>
                            </div>
                        </v-expand-transition>
                    </v-card>
                </v-stepper-content>
                <v-stepper-content step="2">
                    <v-card
                            class="mb-2"
                            color="grey lighten-1"
                            height="200px"

                    >
                        <p v-for="(msg,index) in msgs" v-text="`> ` + msg" style="color:green;"></p>
                    </v-card>

                    <v-btn
                            color="primary"
                            @click="download"
                    >
                        Download
                    </v-btn>

                    <v-btn text @click="again">Again</v-btn>
                </v-stepper-content>
            </v-stepper-items>
        </template>
    </v-stepper>
</template>

<script>
    import {mapGetters} from "vuex"
    import {UploadFileExcel, UploadFilePlain, DownloadBatch} from "@/api/batch";

    export default {
        data() {
            return {
                current: 0,
                vertical: true,
                project: "",
                steps: ["Upload Excel File", "Upload Template File", "Download Result Zip"],
                altLabels: false,
                editable: false,
                show: false,
                headers: [
                    {
                        text: '序号',
                        align: 'center',
                        sortable: false,
                        value: 'id',
                    },
                    {
                        text: '姓名',
                        align: 'center',
                        sortable: false,
                        value: 'name',
                    },
                    {
                        text: '年龄',
                        align: 'center',
                        sortable: false,
                        value: 'age',
                    },
                    {
                        text: '学校',
                        align: 'center',
                        sortable: false,
                        value: 'school',
                    },
                ],
                desserts: [
                    // {id:"序号",name:"姓名",age:"年龄",school:"学校"},
                    {id: 1, name: "小明", age: 11, school: "光明小学"},
                    {id: 2, name: "小红", age: 10, school: "实验小学"},
                    {id: 3, name: "小花", age: 12, school: "实验小学"},
                ],
                msgs: [], // ["数据文件准备就绪", "模板文件准备就绪", "渲染文件准备就绪"],
                tags: [,
                    {id: 1, tag: "{{ .Now }}", desc: "当前时刻，包含日期、时间", eg: ""},
                    {id: 2, tag: "{{ .Today }}", desc: "当前时刻，日期", eg: ""},
                    {id: 3, tag: "{{ .Time }}", desc: "当前时刻，时间", eg: ""},
                    {id: 4, tag: "{{ .Year }}", desc: "当前时刻，年份", eg: ""},
                    {id: 5, tag: "{{ .Month }}", desc: "当前时刻，月", eg: ""},
                    {id: 6, tag: "{{ .Day }}", desc: "当前时刻，日", eg: ""},
                    {id: 7, tag: "{{ .Hour }}", desc: "当前时刻，时", eg: ""},
                    {id: 8, tag: "{{ .Minute }}", desc: "当前时刻，分", eg: ""},
                    {id: 9, tag: "{{ .Second }}", desc: "当前时刻，秒", eg: ""},
                ],
                example: ["大家好！",
                    "我是{{ .姓名 }}，今年{{ .年龄 }}岁了。",
                    "我来自{{ .学校 }}。",
                    "希望能成为大家的好朋友！"],
            }
        },
        computed: {
            ...mapGetters("app", ["isMobile"])
        },
        watch: {
            steps(val) {
                if (this.current > val) {
                    this.current = val
                }
            },
            vertical() {
                this.current = 2
                requestAnimationFrame(() => this.current = 0) // Workarounds
            },
        },
        created() {
            this.vertical = this.isMobile;
        },
        methods: {
            onInput(val) {
                this.steps = parseInt(val)
            },
            nextStep(n) {
                if (n === this.steps.length) {
                    this.current = 0
                } else {
                    this.current = n + 1
                }
            },
            uploadexcel() {
                let uploadbtn = this.$refs.uploadexcel
                uploadbtn.click()

            },
            async changeexcel(e) {
                let formData = new FormData()
                formData.append('file', e.target.files[0])
                UploadFileExcel(formData).then(res => {
                    this.project = res.body.FileName
                    this.current += 1
                    this.msgs.push("数据文件准备就绪")
                })
            },
            uploadplain() {
                let uploadbtn = this.$refs.uploadplain
                uploadbtn.click()

            },
            async changeplain(e) {
                let formData = new FormData()
                formData.append('file', e.target.files[0])
                // await myServiece.fun(formData)
                UploadFilePlain(formData, this.project).then(res => {
                    this.current += 1
                    this.msgs.push("模板文件准备就绪")
                    setTimeout(()=>{
                        this.msgs.push("渲染文件准备就绪")
                    }, 500)
                })
            },
            download() {
                DownloadBatch({"project": this.project}, this.project + ".zip").then((res) => {
                    this.msgs.push("正在下载")
                })
            },
            again() {
                this.msgs = []
                this.current = 0
                this.project = ""
            }
        },
    }
</script>